<template>
  <div class="aside1">
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" active-text-color="#ffd04b"
      background-color="#545c64" text-color="#fff" :collapse="isCollapse" router>
      <template v-for="(item, index) in roleMenu" :key="item.path">
        <el-sub-menu :index="item.path" v-show="item.children">
          <template #title>
            <el-icon>
              <component :is="item.meta.icon"></component>
            </el-icon>
            <span>{{ item.meta.label }}</span>
          </template>
          <el-menu-item v-for="itm in item.children" :key="itm.path" :index="itm.path">{{
            itm.meta.label
          }}</el-menu-item>
        </el-sub-menu>
        <el-menu-item :index="item.path" v-show="!item.children">
          <el-icon>
            <component :is="item.meta.icon" />
          </el-icon>
          <span v-if="!isCollapse">
            {{ item.meta.label }}
          </span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
import { routes } from '../router/index'
export default {
  data() {
    return {
      routes: routes[0].children,
    }
  },
  computed: {
    isCollapse() {
      return this.$store.state.collapse.isCollapse
    },
    roleMenu() {
      return this.$store.state.user.userInfo.roleMenu
    }
  },
  created() {
    console.log(this.roleMenu)
  }
}

</script>

<style lang="scss">
/* .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 90vh; 
   background-color: #555c64;
} */
.el-menu {
  border-right: none !important;
}
</style>
